<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--360浏览器优先以webkit内核解析-->
    <title>若依介绍</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.min.css" th:href="@{/css/style.min.css}" rel="stylesheet"/>
	<style>
		.small-box {
			border-radius: 0.25rem;
			box-shadow: 0 0 1px rgb(0 0 0 / 13%), 0 1px 3px rgb(0 0 0 / 20%);
			display: block;
			margin-bottom: 20px;
			position: relative;
		}

		.small-box>.inner {
			padding: 10px;
		}

		.small-box>.small-box-footer {
			background: rgba(0,0,0,.1);
			color: rgba(255,255,255,.8);
			display: block;
			padding: 3px 0;
			position: relative;
			text-align: center;
			text-decoration: none;
			z-index: 10;
		}

		.small-box>.small-box-footer:hover {
			background: rgba(0,0,0,.15);
			color: #fff;
		}
		
		.small-box>.inner>h3 {
            font-size: 2.7rem;
		}

		.small-box>.inner>p {
            font-size: 1.5rem;
		}

	</style>
</head>

<body class="gray-bg">
    <div class="row border-bottom white-bg dashboard-header">
        <div class="col-lg-12">
			<div class="col-lg-3 col-6">
				<!-- small box -->
				<div class="small-box badge-success" th:object="${nodeStatus}">
					<div class="inner">
						<h3 th:text="*{(normal + inStopping) + '/' + (notStarted + normal + inStarting + inStopping)}"></h3>

						<p>监控主机</p>
					</div>
					<a href="javascript:void(0)" onclick="detail('主机状态', '/system/nodeStatus')" class="small-box-footer btn-sm">更多 <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
			<div class="col-lg-3 col-6">
				<!-- small box -->
				<div class="small-box badge-success" th:object="${serviceStatus}">
					<div class="inner">
						<h3 th:text="*{(normal + inStopping) + '/' + (notStarted + normal + inStarting + inStopping)}"></h3>

						<p>监控服务</p>
					</div>
					<a href="javascript:void(0)" onclick="detail('服务状态', '/system/serviceStatus')" class="small-box-footer btn-sm">更多 <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
			<div class="col-lg-3 col-6">
				<!-- small box -->
				<div class="small-box badge-success" th:object="${softwareStatus}">
					<div class="inner">
						<h3 th:text="*{(normal + inStopping) + '/' + (notStarted + normal + inStarting + inStopping)}"></h3>

						<p>监控软件</p>
					</div>
					<a href="javascript:void(0)" onclick="detail('软件状态', '/system/softwareStatus')" class="small-box-footer btn-sm">更多 <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
			<div class="col-lg-3 col-6">
				<!-- small box -->
				<div class="small-box badge-success" th:object="${nodeNtpdateStatus}">
					<div class="inner">
						<h3 th:text="*{(ntpSuccess) + '/' + (ntpSuccess + ntpFail + ntpUnavailable)}"></h3>

						<p>监控时间同步</p>
					</div>
					<a href="javascript:void(0)" onclick="detail('时间同步情况', '/system/nodeNtpdate')" class="small-box-footer btn-sm">更多 <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
			<div class="col-lg-3 col-6">
				<!-- small box -->
				<div class="small-box badge-info">
					<div class="inner">
						<h3 th:text="${generalAlarm}"></h3>

						<p>一般告警</p>
					</div>
					<a href="javascript:void(0)" onclick="detail('一般告警', '/system/alarm?level=1')" class="small-box-footer btn-sm">更多 <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
			<div class="col-lg-3 col-6">
				<!-- small box -->
				<div class="small-box badge-warning">
					<div class="inner">
						<h3 th:text="${primaryAlarm}"></h3>

						<p>主要告警</p>
					</div>
					<a href="javascript:void(0)" onclick="detail('主要告警', '/system/alarm?level=2')" class="small-box-footer btn-sm">更多 <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
			<div class="col-lg-3 col-6">
				<!-- small box -->
				<div class="small-box badge-danger">
					<div class="inner">
						<h3 th:text="${seriousAlarm}"></h3>

						<p>严重告警</p>
					</div>
					<a href="javascript:void(0)" onclick="detail('严重告警', '/system/alarm?level=3')" class="small-box-footer btn-sm">更多 <i class="fa fa-arrow-circle-o-right"></i></a>
				</div>
			</div>
        </div>
		<div class="col-lg-6 panel panel-danger">
			<div class="panel-heading">
				<h3 class="panel-title">最近告警列表</h3>
			</div>
			<div class="panel-body">
				这是一个基本的面板
			</div>
		</div>
    </div>
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
	<script th:src="@{/monitor/js/common.js}"></script>
	<script th:src="@{/monitor/js/monitor-ui.js}"></script>
    <script type="text/javascript">
	    $('#pay-qrcode').click(function(){
	        var html=$(this).html();
	        parent.layer.open({
	            title: false,
	            type: 1,
	            closeBtn:false,
	            shadeClose:true,
	            area: ['600px', '360px'],
	            content: html
	        });
	    });

		/* 更多 */
		function detail(title, url) {
			$.modal.openTab(title, url);
		}
    </script>
</body>
</html>
